<template>
  <div class="content-container">
    <el-row
      type="flex"
      justify="space-between"
      class="header-filter four-border-blueBg"
    >
      <div class="row-left">
        <TextInput
          v-model="listParams.name"
          class="item"
          clearable
          :placeholder="$t('travelAgency.templateName')"
        />
        <TextInput
          v-model="listParams.peopleCount"
          class="item"
          verify-type="nzint"
          clearable
          :placeholder="$t('hotel.personCount')"
        />
        <!-- <DateTime
          v-model="listParams.createTime"
          class="item"
          style="min-width: 190px; max-width: 190px"
          clearable
          :placeholder="$t('public.createTime')"
        /> -->
        <el-button type="primary" @click="handleQuery">{{
          $t('public.search')
        }}</el-button>
        <el-button plain @click="handleReset">{{
          $t('public.reset')
        }}</el-button>
      </div>
      <div class="row-right">
        <el-button type="primary" @click="handleCreate"
          >+ {{ $t('public.create') }}</el-button
        >
      </div>
    </el-row>
    <div v-loading="loading" class="base-table-container">
      <el-row :gutter="4" class="row-card">
        <el-col
          v-for="item in tableData"
          :key="item.id"
          :span="6"
          :xs="12"
          :sm="8"
          :md="8"
          :lg="6"
          :xl="4"
          style="margin-bottom: 4px"
        >
          <el-card>
            <template #header>
              <div class="card-header">
                {{ $t('travelAgency.templateName') }}：{{ item.name }}
              </div>
            </template>
            <div class="card-item">
              {{ $t('hotel.personCount') }}：{{ item.peopleCount }}
            </div>
            <div class="card-item">
              {{ $t('travelAgency.applicableAge') }}：{{ item.ageMin }}-{{
                item.ageMax
              }}
            </div>
            <div class="card-item">
              {{ $t('travelAgency.totalPrice') }}：{{ item.totalPrice }}
            </div>
            <div class="card-item">
              {{ $t('travelAgency.perCapitaPrice') }}：{{ item.perPersonPrice }}
            </div>
            <template #footer>
              <el-button text @click="handleDetailDialog(item)">
                {{ $t('public.detail') }}
              </el-button>
              <el-button text @click="handleEditDialog(item)">
                {{ $t('public.edit') }}
              </el-button>
              <el-button text @click="handleDelete(item)">
                {{ $t('public.delete') }}
              </el-button>
            </template>
          </el-card>
        </el-col>
      </el-row>
      <BasePagination
        v-model:page-size="pageSize"
        v-model:current-page="pageNum"
        :total="total"
        @change="getTableList()"
      />
    </div>
    <!-- 新建/编辑 -->
    <AddOrEditDialog
      v-if="addOrEditVisible"
      :id="rowId"
      v-model="addOrEditVisible"
      :type="addOrEditType"
      @update="handleQuery"
    />
    <!-- 详情 -->
    <DetailDialog
      v-if="detailVisible"
      :id="rowId"
      v-model="detailVisible"
      @update="handleQuery"
    />
  </div>
</template>

<script setup>
import AddOrEditDialog from './component/AddOrEditDialog.vue'
import DetailDialog from './component/DetailDialog.vue'

const listParams = ref({
  name: '',
  peopleCount: '',
  createTime: ''
})
const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([])
const columnWidthObj = ref({})
const total = ref(0)
const pageSize = ref(window.screen.width <= 1366 ? 10 : 20)
const pageNum = ref(1)
const addOrEditVisible = ref(false)
const addOrEditType = ref('add')
const rowId = ref('')
const detailVisible = ref(false)

onMounted(() => {
  getTableList()
})

const getTableList = () => {
  loading.value = true
  tableData.value = []
  g_api.travelAgency
    .apiCalculatorList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...listParams.value
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tableData.value = data.items
        total.value = data.total
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}

const handleReset = () => {
  Object.assign(listParams.value, {
    name: '',
    peopleCount: '',
    createTime: ''
  })
  handleQuery()
}

const handleCreate = () => {
  addOrEditVisible.value = true
  addOrEditType.value = 'add'
}

const handleDetailDialog = (row, type) => {
  detailVisible.value = true
  rowId.value = row.id
}

const handleEditDialog = row => {
  addOrEditVisible.value = true
  addOrEditType.value = 'edit'
  rowId.value = row.id
}

const handleDelete = row => {
  g_utils
    .deleteConfirm()
    .then(() => {
      loading.value = true
      g_api.travelAgency
        .apiCalculatorDelete({
          templateId: row.id
        })
        .then(res => {
          if (res.code === '200') {
            ElMessage.success(res.message)
            handleQuery()
          }
        })
        .finally(() => {
          loading.value = false
        })
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.base-table-container {
  justify-content: space-between;
  .row-card {
    overflow-y: auto;
  }
  :deep(.el-card__footer) {
    padding: 0 10px;
  }
}
.card-header {
  @extend .oneEllipsis;
}
</style>
